<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<title>index_0223_03</title>
	</head>
	<body>
		<div id="app1">
			<gss-btn title="按钮名称" @show-add="handleAdd">
				<!-- 如果组件内定义了插槽，可以在使用组件时向插槽插入html内容 -->
				<a href="">链接1</a>
			</gss-btn>
			
			
			<gss-btn title="按钮名称2" @show-add="handleAdd">
				<a href="">链接2</a>
			</gss-btn>
		</div>
		<script type="text/javascript">
			// 定义一个名为gss-btn的组件
			Vue.component('gss-btn', {
				// props定义组件的输入参数列表
				props:['title'],
				// data定义组件内需要使用的属性
				data: function(){
					return {
						count: 0
					}
				},
				// methods定义组件内的函数
				methods:{
					add:function(){
						this.count++;
						// 当被调用者需要接收组件内的事件响应时，可用$emit通过组件内发射一个事件及传递的参数
						this.$emit('show-add',this.count)
					}
				},
				// template定义组件渲染的模板内容
				template:'<div><button v-on:click="add">{{title}} {{count}} </button><span><slot></slot></span></div>'
			})
			
			var app = new Vue({
				el: '#app1',
				data: {
					title:''
				},
				methods:{
					handleAdd:function(count){
						console.log(count)
					}
		
				}
			})
		</script>
	</body>
</html>
